<template>
 <view class="confirmation">
  <view  v-for="(item,index) in waitRecord" :key="index">
   <view class="debt" @click="debtDetails(item)">
   	<view class="d-f top">
		<view class="prevtime">{{item.createtime}}	</view>
     <view class="query">待确认</view>
   	</view>
   	<view class="center d-f">
   		<view class="fund">
   			{{item.loan_money}}￥
   		</view>
   		<view class="obligee d-f-j-c-a-i">
   			债务人：{{item.obligor.username}}
   		</view>
   	</view>
   	<view class="bottom">
   		<view >年化利率：{{item.year_rate}}%</view>
   		<view >{{item.loan_date}}-{{item.repay_date}}</view>
   	</view>
   </view>
  </view>
 </view>
</template>

<script>
	import {
		mapState,mapActions,mapMutations
	} from 'vuex'

 export default {
   data () {
     return {

     }
   },
   components: {

   },
   methods: {
	   ...mapMutations({
		 editObligorDebit: 'MAY_DEBT/EDIT_OBLIGOR_DEBIT', //获取编辑数据  
	   }),
    ...mapActions({
		getConfirmed:'MAY_DEBT/GET_WAIT'
	}),
	debtDetails(item){
		 uni.navigateTo({
		     url: `/pages/creditor/personam/launchEdit`
		 });
		 this.editObligorDebit(item)
	}
   },
   mounted() {
    this.getConfirmed()
   },
   watch: {

   },
   computed: {
    ...mapState({
		waitRecord: (state) => state.MAY_DEBT.waitRecord, //债务数组
	})
   }
 }
</script>

<style scoped lang='scss'>
	.debt {
		width: 686rpx;
		height: 296rpx;
		background: #FFFFFF;
		margin-left: 32rpx;
		width: 686rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-shadow: 0px 3px 14px rgba(105, 86, 234, 0.08);
		
	}
   .confirmation{
	   padding-bottom: 20rpx;
   }
	.top {
		padding: 14rpx 0px;
		position: relative;
		height: 52rpx;
	}
	.center {
		width: 100%;
		padding: 0px 32rpx;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.fund {
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		color: #262727;

	}
	.bottom {
		width: 100%;
		border-top: 1px solid #EFEFEF;
		margin-top: 28rpx;
		height: 98rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0px 32rpx;
	}
	.query{
		width: 132rpx;
		height: 52rpx;
		background: #cfe2ff;
		opacity: 1;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #4A8FF9;
		right: 0;
		position: absolute;
	}
	.prevtime{
	margin-left: 14rpx;
	color: #90939D;
	}
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>